<template>
  <div class="vmall-order-detail">
    <div class="container">
      <!-- 订单状态 -->
      <div class="status mb-24 px-32 py-28 bg-yellow" v-if="orderInfo.status === 1">
        <div class="flex justify-between items-center">
          <div class="flex1 f-28-B colorwhite">待审核</div>
        </div>
      </div>
      <div class="status mb-24 px-32 py-28 bg-yellow" v-if="orderInfo.status === 2">
        <div class="flex justify-between items-center">
          <div class="flex1 f-28-B colorwhite">待发货</div>
        </div>
      </div>
      <div class="status mb-24 px-32 py-28 bg-yellow" v-if="orderInfo.status === 3">
        <div class="flex justify-between items-center">
          <div class="flex1 f-28-B colorwhite">待收货</div>
          <div class="flex" @click="onOrderLogistics">
            <div class="inform-text f-28">查看物流</div>
            <up-icon name="arrow-right" size="16" color="rgba(214, 142, 68, 1)" />
          </div>
        </div>
      </div>
      <div class="status mb-24 px-32 py-28 bg-yellow" v-if="orderInfo.status === 4">
        <div class="flex justify-between items-center">
          <div class="flex1 f-28-B colorwhite">已完成</div>
          <div class="flex" @click="onOrderLogistics">
            <div class="inform-text f-28">查看物流</div>
            <up-icon name="arrow-right" size="16" color="rgba(214, 142, 68, 1)" />
          </div>
        </div>
      </div>
      <div class="status mb-24 px-32 py-28 bg-yellow" v-if="orderInfo.status === 5">
        <div class="flex justify-between items-center">
          <div class="flex1 f-28-B colorwhite">退换货</div>
        </div>
      </div>
      <div class="status mb-24 px-32 py-28 bg-yellow" v-if="orderInfo.status === 6">
        <div class="flex justify-between items-center">
          <div class="flex1 f-28-B colorwhite">已关闭</div>
        </div>
      </div>
      <!-- 地址信息 -->
      <div class="address flex column justify-start my-24 px-32 py-36 bg-white">
        <div class="flex f-32-B">
          <text class="mr-28">{{ orderInfo.shopName }}</text>
        </div>
        <div class="mt-12 f-28">
          <text>{{ orderInfo.province }}</text>
          <text>{{ orderInfo.city }}</text>
          <text>{{ orderInfo.street }}</text>
          <text>{{ orderInfo.receiverAddress }}</text>
        </div>
        <div class="mt-12 f-28">
          <text>{{ orderInfo.receiverName }}</text>
          <text style="margin-left: 12rpx;">{{ orderInfo.receiverPhone }}</text>
        </div>
      </div>
      <!-- 商品详情 -->
      <div>
        <view v-for="(item, index) in orderInfo.productList" :key="item.orderId"
          class="order-item borderradius my-24 px-32 py-24 bg-white">
          <view class="order-itemscon" @click="goToDetail(item)">
            <image class="cover mr-28" :src="item.image" />
            <view class="flex column flex1 py-24">
              <view class="cart-title flex justify-start items-center">
                <view class="tit">{{ item.name }}</view>
              </view>
              <view class="flex justify-between">
                <text class="price1 f-32-B">￥{{ item.price }}</text>
              </view>
            </view>
            <div class="order-count">
              共{{ item.totalQuantity }}件
            </div>
          </view>
          <div class="borderbottom">
            <view v-for="(items, nindex) in item.skuList" :key="nindex" class="cart-box mb-24">
              <div class="cart-title1 f-24 ellipsis-2">{{ items.spec }}</div>
              <div class="cart-count flex justify-between items-center mt-10">
                x{{ items.quantity }}
              </div>
            </view>
          </div>
        </view>
      </div>
      <!-- 商品总价 -->
      <div class="my-20 px-32 py-32 bg-white orderprice">
        <div class="flex justify-between mt-20">
          <div class="f-28">商品总价</div>
          <div class="price1 f-32-B">￥{{ orderInfo.orderProductAmount }}</div>
        </div>
        <div class="flex justify-between mt-20">
          <div class="f-28">明细备注</div>
          <div class="price1 f-32-B">{{ orderInfo.remark }}</div>
        </div>
        <div class="flex justify-between mt-20" v-if="role==2&&orderInfo.auditStatus==2">
          <div class="f-28"></div>
          <div class="price f-32-B">实付金额:<text class="coloryellow">￥{{ orderInfo.paidAmount }}</text></div>
        </div>
      </div>
      <!-- 时间信息 -->
      <div class="time px-32 py-28 bg-white f-28">
        <div class="flex justify-between">
          <text class="time-text">下单时间：</text>
          <text class="time-text">{{ orderInfo.createTime }}</text>
        </div>
        <div class="flex justify-between mt-24">
          <text class="time-text">订单编号：</text>
          <text class="time-text">{{ orderInfo.orderNo }}</text>
        </div>
        <div class="flex justify-between mt-24" v-if="orderInfo.status == 3 || orderInfo.status == 4 || orderInfo.status == 5 || orderInfo.status == 6">
          <text class="time-text">审核状态：</text>
          <text class="time-text">{{ orderInfo.auditStatusName }}</text>
        </div>
        
        <div class="flex justify-between mt-24" v-if="orderInfo.status == 3 || orderInfo.status == 4 || orderInfo.status == 5 || orderInfo.status == 6">
          <text class="time-text">审核通过时间：</text>
          <text class="time-text">{{ orderInfo.auditTime }}</text>
        </div>
        <!-- 6已关闭 审核拒绝时间、拒绝原因 -->
        <div class="flex justify-between mt-24" v-if="orderInfo.status == 6">
          <text class="time-text">审核拒绝时间：</text>
          <text class="time-text">{{ orderInfo.auditTime }}</text>
        </div>
        <div class="flex justify-between mt-24" v-if="orderInfo.status == 6">
          <text class="time-text">拒绝原因：</text>
          <text class="time-text">{{ orderInfo.applyAdjustDetailList.auditRemark }}</text>
        </div>
        <div class="flex justify-between mt-24" v-if="orderInfo.status == 6">
          <text class="time-text">取消时间：</text>
          <text class="time-text">{{ orderInfo.confirm_time }}</text>
        </div>


      </div>
      <!-- 操作按钮 -->
      <div class="submit px-32 flex justify-end items-center">
        <!-- 1待审核 联系客服、取消订单 2待发货 3待收货 确认收货 4已完成 再下一单、申请调货 5退换货 联系客服、再下一单、申请调货  6已关闭 再下一单 -->
        <view class="btn tc f-24" v-if="orderInfo.status == 1 || orderInfo.status == 5" @click="contrctkefu">联系客服</view>
        <view class="btn tc f-24" v-if="orderInfo.status == 1" @click="onCancelPay">
          <up-loading-icon class="loading" color="#fff" size="16" :show="loading"></up-loading-icon><text>取消订单</text>
        </view>
        <view class="btn ml-20 tc f-24" v-if="orderInfo.status == 3 || orderInfo.status == 4 || orderInfo.status == 5"
          @click="onOrderLogistics(orderInfo)">查看物流</view>
        <view class="btn coloryellow ml-20 tc f-24" v-if="orderInfo.status == 4 || orderInfo.status == 5 || orderInfo.status == 6" @click="onAgainOrderOrder">
          <up-loading-icon class="loading" color="#fff" size="16" :show="loading"></up-loading-icon><text>再下一单</text>
        </view>
        <!-- <view class="btn ml-20 tc f-24" v-if="orderInfo.status == 4 || orderInfo.status == 5">申请调货</view> -->
        <view class="buy-btn ml-20 tc f-24" v-if="orderInfo.status == 3" @click="onReceiveOrder"><up-loading-icon class="loading" color="#fff" size="16" :show="loading"></up-loading-icon><text>确认收货</text></view>
        <view class="btn ml-20 tc f-24" v-if="userInfo1Storge.isSupportChange&&orderInfo.status == 4 || orderInfo.status == 5&&orderInfo.showApplyAdjust" @click="onConfirmApplyAdjust">
          <up-loading-icon class="loading" color="#fff" size="16" :show="loading"></up-loading-icon><text>申请调货</text></view>
      </div>
    </div>
  </div>
</template>

<script setup>
import { shopApi } from "@/api";
import { getUserInfo } from "@/service";
import { getStorage } from "@/utils/storage";
let userInfo1Storge = getUserInfo();
let role=ref(getStorage('role'))
const orderId = ref();
const orderInfo = ref({
  status: 0,
});
// 倒计时
const totalTime = ref();
const timer = ref(null);
const countDownText = ref();
const getData = (Id) => {
  shopApi.ORDERGETORDERDETAIL({ id: Id }).then((res) => {
    if (res.code == 200) {
      orderInfo.value = res.result;
    } else {
      uni.showToast({
        title: res.errMsg,
        icon: "success",
      });
    }

  })

};
const loading = ref(false);
onLoad((options) => {
  orderId.value = options.id;
  getData(options.id)
  totalTime.value = 360;
  if (totalTime.value > 0) {
    countDown();
  }
});

onUnload(() => {
  clearInterval(timer.value);
});


const goToDetail = (item) => {
  uni.navigateTo({
    url: "/pages/good/details?id=" + item.productId
  });
}
// 获取订单详情
const getOrderDetail = (id) => {
  shopApi.orderDetail({ id }).then((res) => {
    if (res.code == 200) {
      orderInfo.value = res.data;
      totalTime.value = res.data.remain_time;
      if (totalTime.value > 0) {
        countDown();
      }
    } else {
      uni.showToast({
        title: res.errMsg,
        icon: "success",
      });
    }

  });
};

// 查看物流
const onOrderLogistics = () => {
  uni.navigateTo({ url: "/pages/order/logistics?id=" + orderInfo.value.orderId });
};

// 确认申请调换货
const onConfirmApplyAdjust = () => {
  uni.navigateTo({ url: "/pages/order/goodsexchange?id=" + orderInfo.value.orderId });
};

// 取消支付(取消订单)
const onCancelPay = () => {
  loading.value = true;
  shopApi.ORDERCANCELORDER({
    id: orderInfo.value.orderId
  }).then((res) => {
    loading.value = false;
    if (res.code == 200) {
      uni.showToast({
        title: "订单已取消",
        icon: "success",
        mask: true
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 1000);
    } else {
      uni.showToast({
        title: res.errMsg,
        icon: "success",
      });
    }
  });

};

// 再下一单
const onAgainOrderOrder = () => {
  loading.value = true;
  shopApi.ORDERAGAINORDER({
    id: orderInfo.value.orderId
  }).then((res) => {
    loading.value = false;
    if (res.code == 200) {
      uni.showToast({
        title: "再下一单成功",
        icon: "success",
        mask: true
      });

    } else {
      uni.showToast({
        title: res.errMsg,
        icon: "success",
      });
    }
  });

};
// 联系客服
const contrctkefu=()=>{
  uni.navigateTo({ url: '/pages/user/customerservice' });
}

// 确认收货
const onReceiveOrder = () => {
  loading.value = true;
  shopApi.ORDERRECEIVEORDER({
    id: orderInfo.value.orderId
  }).then((res) => {
    loading.value = false;
    if (res.code == 200) {
      uni.showToast({
        title: "确认成功",
        icon: "success",
        mask: true
      });
      getOrderDetail(orderInfo.value.orderId);
    } else {
      uni.showToast({
        title: res.errMsg,
        icon: "success",
      });
    }
  });

};


const countDown = () => {
  timer.value = setInterval(() => {
    if (totalTime.value >= 0) {
      countDownFn();
    } else {
      clearInterval(timer.value); // 停止调用计时器函数
      getOrderDetail(orderInfo.value.orderId);
    }
  }, 1000); // 以毫秒为单位，每1秒调用一次
};
// 待支付倒计时
const countDownFn = () => {
  let seconds,
    minutes,
    timerMsg = "";

  seconds = Math.floor(totalTime.value % 60); // 秒
  minutes = Math.floor((totalTime.value / 60) % 60); // 分
  timerMsg = (minutes >= 10 ? minutes : "0" + minutes) + ":" + (seconds >= 10 ? seconds : "0" + seconds);
  // 替换掉页面内容
  countDownText.value = timerMsg;
  totalTime.value = totalTime.value - 1;
};
</script>

<style lang="scss">
page {
  background-color: #ededed;
}
</style>
<style lang="scss" scoped>
.vmall-order-detail {
  .container {
    padding-bottom: 160rpx;
    .bg-yellow{
      background-color: rgba(214, 142, 68, 1)
    }
    .colorwhite{
      color: #fff;
    }
  }

  .icon-right {
    width: 48rpx;
    height: 48rpx;
  }

  .tip-text {
    color: #909193;
    vertical-align: middle;
  }

  .price {
    color: rgba(214, 142, 68, 1);
  }

  .icon-img {
    width: 48rpx;
    height: 48rpx;
  }

  .inform-text {
    color: rgba(214, 142, 68, 1);
  }

  .order-item {

    .cover {
      width: 120rpx;
      height: 120rpx;
      border-radius: 8rpx;
    }

    .order-itemscon {
      display: flex;
      align-items: center;
      width: 100%;
      margin-bottom: 12rpx;

      .cart-title {
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        color: rgba(0, 0, 0, 1);
      }

      .price1 {
        color: rgba(0, 0, 0, 1);
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;

      }

      .order-count {
        color: rgba(0, 0, 0, 0.6);
      }
    }

    .cart-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .borderbottom {
      border-bottom: 1rpx solid #e3e3e3;
    }
  }

  .order-item:last-child {
    .borderbottom {
      border-bottom: none;
    }
  }

  .orderprice{
    .price1 {
      font-family: PingFang SC;
      font-size: 12px;
      font-weight: 400;
      line-height: 20px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: rgba(0, 0, 0, 0.6);
    }
    .price{
      font-family: PingFang SC;
      font-size: 12px;
      font-weight: 600;
      line-height: 20px;
      text-align: left;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: rgba(0, 0, 0, 0.9);
    }
    .coloryellow{
      color: rgba(193, 122, 50, 1);
    }
  }

  .time-text {
    color: #909193;
  }

  .submit {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 120rpx;
    line-height: 120rpx;
    background: #ffffff;
    box-sizing: border-box;

    .btn {
      width: 150rpx;
      height: 50rpx;
      line-height: 50rpx;
      background: #ffffff;
      color: rgba(0, 0, 0, 0.26);
      border-radius: 12rpx;
      border: 2rpx solid rgba(0, 0, 0, 0.26);
      margin-left: 12rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .coloryellow{
      background: rgba(214, 142, 68, 1) !important;
      color: #fff !important;
      border: 2rpx solid rgba(214, 142, 68, 1);
    }

    .buy-btn {
      width: 150rpx;
      height: 50rpx;
      line-height: 50rpx;
      background: #ffffff;
      color: rgba(214, 142, 68, 1);
      border-radius: 52rpx;
      border: 2rpx solid rgba(214, 142, 68, 1);
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .cancel-btn {
    width: 200rpx;
    height: 68rpx;
    line-height: 68rpx;
    background: #ffffff;
    color: #000000;
    border-radius: 52rpx;
    border: 2rpx solid #e6e6e6;
  }

  .pay-btn {
    width: 200rpx;
    height: 68rpx;
    line-height: 68rpx;
    background: rgba(214, 142, 68, 1);
    color: #ffffff;
    border-radius: 52rpx;
    border: 2rpx solid rgba(214, 142, 68, 1);
  }

  .confirm-btn {
    width: 200rpx;
    height: 68rpx;
    line-height: 68rpx;
    background: rgba(214, 142, 68, 1);
    color: #ffffff;
    border-radius: 52rpx;
    border: 2rpx solid rgba(214, 142, 68, 1);
  }
}
</style>